<template>
	<div class="login-contain">
		<div class="header">
			<div class="header-logo"><img src="../../assets/index/logo.png" alt="" /></div>
		</div>
		<div class="user-register">
			<div class="register-title">
				<div><i class="el-icon-arrow-left" @click="backIcon"></i></div>
				<div style="width: 100%; text-align: center;color: #FFFFFF;font-weight: bold;">注册账号</div>
				<div></div>
			</div>
			<div class="info-register">
				<el-form ref="form" :rules="rules" :model="form">
					<el-form-item label="" prop="username"><el-input style="width: 20rem;" v-model="form.username" placeholder="设置账号"></el-input></el-form-item>
					<el-form-item label="" prop="password"><el-input type="password" style="width: 20rem;" v-model="form.password" placeholder="设置密码"></el-input></el-form-item>
					<el-form-item label="" prop="qr_password">
						<el-input type="password" style="width: 20rem;" v-model="form.qr_password" placeholder="重复输入密码"></el-input>
					</el-form-item>
					<el-form-item label="" prop="mobile"><el-input style="width: 20rem;" v-model="form.mobile" maxlength="11" placeholder="输入手机号"></el-input></el-form-item>
					<el-form-item label="" prop="name"><el-input style="width: 20rem;" v-model="form.name" placeholder="输入姓名"></el-input></el-form-item>
					<el-form-item prop="birthday">
						<el-date-picker value-format="yyyy-MM-dd" style="width: 20rem;" v-model="form.birthday" type="date" placeholder="选择出生日期"></el-date-picker>
					</el-form-item>
					<el-form-item label="" prop="sex">
						<div style="width: 20rem;margin: auto; display: flex;justify-content:space-around;align-items: center;">
							<span>性别:</span>
							<el-radio-group v-model="form.sex">
								<el-radio label="男"></el-radio>
								<el-radio label="女"></el-radio>
							</el-radio-group>
						</div>
					</el-form-item>
					<el-form-item label="" prop="email"><el-input style="width: 20rem;" v-model="form.email" placeholder="输入邮箱"></el-input></el-form-item>
					<el-form-item label="" prop="code">
						<div style="display: flex;justify-content: center;">
							<el-input v-model="form.code" style="width: 13rem;" maxlength="6" placeholder="输入验证码"></el-input>
							<el-button class="register-btn" v-show="show" @click="getCodeBtn">获取验证码</el-button>
							<el-button class="register-btn" v-show="!show">{{ count }}</el-button>
						</div>
					</el-form-item>
					<el-form-item>
						<el-button class="register-y" :loading="loading" @click="submitForm('form')">
							<span v-if="!loading">确认注册</span>
							<span v-else>注册中...</span>
						</el-button>
					</el-form-item>
					<el-form-item>
						<div>
							<el-checkbox v-model="form.checked"></el-checkbox>
							<span style="color: #999999; margin-left: 0.4rem;">确认代表您已阅读并同意</span>
							<span style="color: #146AC1;" @click="userClause">用户条款</span>
						</div>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
import { sendEmail, registered } from '@/api/api';
export default {
	name: 'registerUser',
	data() {
		//账号
		const usernameRule = (rule, value, callback) => {
			if (value === null) {
				callback(new Error('账号不能为空'));
			} else if (!/^[\\u4e00-\\u9fa5_a-zA-Z0-9-]{1,16}$/.test(value)) {
				// 昵称格式：限16个字符，支持中英文、数字、减号或下划线
				callback(new Error('请输入中英文、数字、减号或下划线'));
			} else {
				callback();
			}
		};
		//密码
		const passwordRule = (rule, value, callback) => {
			if (value == null) {
				callback(new Error('请输入密码'));
			} else if (!/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{6,20}$/.test(value)) {
				//密码包含 数字,英文,字符中的两种以上，长度6-20
				callback(new Error('请输入中英文、数字、减号或下划线'));
			} else {
				callback();
			}
		};
		//确认密码
		const qr_passwordRule = (rule, value, callback) => {
			if (value == null) {
				callback('请输入确认密码');
			} else if (!/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{6,20}$/.test(value)) {
				callback(new Error('请输入中英文、数字、减号或下划线'));
			} else if (value != this.form.password) {
				callback('两次新密码不一致');
			} else {
				callback();
			}
		};
		//手机号
		const mobileRule = (rule, value, callback) => {
			if (value == null) {
				callback('请输入手机号');
			} else if (!/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(value)) {
				callback('请输入正确的手机号');
			} else {
				callback();
			}
		};
		//邮箱
		const emailRule = (rule, value, callback) => {
			if (value == null) {
				callback('请输入邮箱');
			} else if (!/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(value)) {
				callback(new Error('请输入正确的邮箱格式'));
			} else {
				callback();
			}
		};
		return {
			loading: false,
			show: true,
			count: '',
			timer: null,
			form: {
				username: null,
				password: null,
				qr_password: null,
				mobile: null,
				name: null,
				sex: null,
				birthday: null,
				email: null,
				code: null,
				checked: false
			},
			rules: {
				username: [{ required: true, validator: usernameRule, trigger: 'blur' }],
				password: [{ required: true, validator: passwordRule, trigger: 'blur' }],
				qr_password: [{ required: true, validator: qr_passwordRule, trigger: 'blur' }],
				mobile: [{ required: true, validator: mobileRule, trigger: 'blur' }],
				name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
				birthday: [{ required: true, message: '请选择出生日期', trigger: 'change' }],
				sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
				email: [{ required: true, validator: emailRule, trigger: 'blur' }],
				code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
			}
		};
	},
	created() {},
	methods: {
		//返回上一步
		backIcon() {
			this.$router.push({
				path: '/login'
			});
		},
		//用户条款
		userClause() {
			this.$router.push({
				path: '/userAgreement'
			});
		},
		//验证码接口
		getCode() {
			let formData = new FormData();
			formData.append('email', this.form.email);
			sendEmail(formData).then(res => {
				if (res.code == 1002) {
					// this.msgSuccess(res.msg);
					console.log('邮箱错误!');
				} else {
					const TIME_COUNT = 60;
					if (!this.timer) {
						this.count = TIME_COUNT;
						this.show = false;
						this.timer = setInterval(() => {
							if (this.count > 0 && this.count <= TIME_COUNT) {
								this.count--;
							} else {
								this.show = true;
								clearInterval(this.timer);
								this.timer = null;
							}
						}, 1000);
					}
				}
			});
		},
		//获取验证码
		getCodeBtn() {
			if (this.form.email == null) {
				this.msgError('请先输入邮箱');
			} else {
				this.getCode();
			}
		},
		//提交信息
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					if (this.form.checked) {
						this.loading = true;
						registered(this.form).then(res => {
							if (res.code == 1001) {
								this.msgSuccess(res.msg);
								setTimeout(() => {
									this.loading = false;
									this.$router.push({ path: '/login' });
								}, 1500);
							} else {
								this.loading = false;
							}
						});
					} else {
						this.msgError('请阅读用户条款');
					}
				} else {
					return false;
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.login-contain {
	width: 100%;
	height: 100%;
	background-image: url(../../assets/logoin.png);
	background-size: cover; /* 使图片平铺满整个浏览器（从宽和高的最大需求方面来满足，会使某些部分无法显示在区域中） */
	position: absolute; /* 不可缺少 */
	.header {
		display: flex;
		align-items: center;
		width: 100%;
		height: 8rem;
		background: url(../../assets/index/dingbu.png) no-repeat;
		background-size: 100% 100%;
		.header-logo {
			display: flex;
			align-items: center;
			width: 65%;
			margin: 0 auto;
		}
	}
	.user-register {
		width: 40rem;
		height: 47rem;
		margin: auto;
		margin-top: 1rem;
		border-radius: 0.5rem;
		// padding: 1.5rem;
		background-color: #ffffff;
		.register-title {
			background-color: #146ac1;
			border-radius: 0.5rem 0.5rem 0 0;
			width: 100%;
			height: 3rem;
			display: flex;
			flex-direction: row;
			align-items: center;
			div {
				flex: 1;
			}
			/deep/ .el-icon-arrow-left {
				margin-left: 1.2rem;
				font-size: 1.5rem;
				color: #ffffff;
			}
		}
		.el-form-item {
			margin-top: 1rem;
			width: 100%;
			text-align: center;
			/deep/.el-form-item__error {
				margin-left: 10rem;
			}
			.register-btn {
				background-color: #146ac1;
				color: #ffffff;
				width: 7rem;
				margin-left: 0.2rem;
			}
			.register-y {
				width: 20rem;
				background-color: #146ac1;
				color: #ffffff;
			}
		}
	}
	/deep/ .el-input .el-input__inner,
	.el-input--suffix .el-input__inner {
		height: 2.5rem;
		border: solid 0.06rem #ffffff;
		border-radius: 7px;
		background-color: #f0f0f3;
		color: #ccc;
	}
	/deep/ .el-date-editor {
		width: 20rem;
		height: 2.5rem;
		border: solid 0.06rem #ffffff;
		border-radius: 7px;
		background-color: #f0f0f3;
		color: #ccc;
	}
}
</style>
